<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回测设置 - 低位龙头股分析系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .card-hover:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            transition: box-shadow 0.3s ease-in-out;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">低位龙头股分析系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/backtesting">回测系统</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/backtesting/settings">回测设置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/news">市场新闻</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col">
                <h2><i class="bi bi-gear"></i> 回测设置</h2>
                <p class="lead">配置回测参数，运行策略回测</p>
            </div>
            <div class="col-auto">
                <a href="/backtesting" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left"></i> 返回回测系统
                </a>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">回测参数设置</h5>
                    </div>
                    <div class="card-body">
                        <form id="backtest-form">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="result_dir" class="form-label">分析结果目录</label>
                                    <select class="form-select" id="result_dir" name="result_dir" required>
                                        <option value="">请选择分析结果目录</option>
                                        {% for dir_name in result_dirs %}
                                        <option value="{{ dir_name }}">{{ dir_name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">选择要回测的分析结果目录</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="report_name" class="form-label">报告名称</label>
                                    <input type="text" class="form-control" id="report_name" name="report_name"
                                        placeholder="report_20220101.json">
                                    <div class="form-text">可选，默认使用当前时间生成报告名称</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="periods" class="form-label">回测周期（月）</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="periods" name="periods"
                                            value="1,3,6,12" placeholder="1,3,6,12">
                                        <span class="input-group-text">月</span>
                                    </div>
                                    <div class="form-text">多个周期用逗号分隔，例如：1,3,6,12</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="benchmark" class="form-label">基准指数</label>
                                    <select class="form-select" id="benchmark" name="benchmark">
                                        <option value="000001">上证指数 (000001)</option>
                                        <option value="399001">深证成指 (399001)</option>
                                        <option value="399006">创业板指 (399006)</option>
                                        <option value="000300">沪深300 (000300)</option>
                                        <option value="000905">中证500 (000905)</option>
                                    </select>
                                    <div class="form-text">用于计算超额收益的基准指数</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="visualize" name="visualize"
                                            checked>
                                        <label class="form-check-label" for="visualize">
                                            生成可视化图表
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary" id="start-backtest">
                                    <i class="bi bi-play-fill"></i> 开始回测
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">回测系统配置</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th style="width: 200px;">数据目录</th>
                                        <td>{{ settings.data_path }}</td>
                                    </tr>
                                    <tr>
                                        <th>价格数据目录</th>
                                        <td>{{ settings.price_data_path }}</td>
                                    </tr>
                                    <tr>
                                        <th>结果保存目录</th>
                                        <td>{{ settings.results_path }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 回测进度模态框 -->
    <div class="modal fade" id="progressModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">回测进行中</h5>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <p class="text-center">正在进行回测，请稍候...</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                            style="width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 回测结果模态框 -->
    <div class="modal fade" id="resultModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">回测完成</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="result-success" style="display: none;">
                        <div class="alert alert-success">
                            <i class="bi bi-check-circle"></i> 回测成功完成！
                        </div>
                        <div class="mb-3">
                            <h6>回测结果摘要：</h6>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th>平均收益率</th>
                                        <td id="avg-return">-</td>
                                    </tr>
                                    <tr>
                                        <th>超额收益</th>
                                        <td id="excess-return">-</td>
                                    </tr>
                                    <tr>
                                        <th>胜率</th>
                                        <td id="win-rate">-</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="result-error" style="display: none;">
                        <div class="alert alert-danger">
                            <i class="bi bi-exclamation-triangle"></i> 回测失败！
                        </div>
                        <p id="error-message"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <a href="#" class="btn btn-primary" id="view-report">查看详细报告</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function () {
            // 回测表单提交
            $('#backtest-form').submit(function (e) {
                e.preventDefault();

                // 获取表单数据
                const resultDir = $('#result_dir').val();
                const reportName = $('#report_name').val();
                const periods = $('#periods').val();
                const benchmark = $('#benchmark').val();
                const visualize = $('#visualize').is(':checked');

                // 显示进度模态框
                $('#progressModal').modal('show');

                // 发送回测请求
                $.ajax({
                    url: '/backtesting/run',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        result_dir: resultDir,
                        report_name: reportName,
                        periods: periods,
                        benchmark: benchmark,
                        visualize: visualize
                    }),
                    success: function (response) {
                        // 隐藏进度模态框
                        $('#progressModal').modal('hide');

                        if (response.success) {
                            // 显示成功结果
                            $('#result-success').show();
                            $('#result-error').hide();

                            // 填充结果数据
                            $('#avg-return').text(response.summary.overall_avg_return.toFixed(2) + '%');
                            $('#excess-return').text(response.summary.overall_excess_return.toFixed(2) + '%');
                            $('#win-rate').text(response.summary.overall_win_rate.toFixed(2) + '%');

                            // 设置查看报告链接
                            $('#view-report').attr('href', '/backtesting/detail/' + response.report_name);
                        } else {
                            // 显示错误结果
                            $('#result-success').hide();
                            $('#result-error').show();
                            $('#error-message').text(response.message);
                            $('#view-report').hide();
                        }

                        // 显示结果模态框
                        $('#resultModal').modal('show');
                    },
                    error: function (xhr) {
                        // 隐藏进度模态框
                        $('#progressModal').modal('hide');

                        // 显示错误结果
                        $('#result-success').hide();
                        $('#result-error').show();
                        $('#error-message').text('回测请求失败，请重试');
                        $('#view-report').hide();

                        // 显示结果模态框
                        $('#resultModal').modal('show');
                    }
                });
            });
        });
    </script>
</body>

</html>